import {memo, useState, useEffect} from 'react'
import { IconPlus } from '@arco-design/web-react/icon';
import { useNavigate } from 'react-router';
import { Message, Dropdown, Menu } from '@arco-design/web-react';

function PlayList() {
  const navigate = useNavigate()
  const [tabsLabel, setTabsLabel] = useState('自建')
  const [activeList, setActiveList] = useState<any>([])
  const selfList = [
    {
      id: '1',
      name: '热门歌单',
      coverImgUrl: 'https://p1.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpg?param=130y130',
      creator: 'ruom',
    },
    {
      id: '2',
      name: '华语',
      coverImgUrl: 'https://p1.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpg?param=130y130',
      creator: 'ruom',
    },
    {
      id: '3',
      name: '流行',
      coverImgUrl: 'https://p1.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpg?param=130y130',
      creator: 'ruom',
    },
    {
      id: '4',
      name: '摇滚',
      coverImgUrl: 'https://p1.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpg?param=130y130',
      creator: 'ruom',
    },
  ]
  const collectList = [
    {
      id: '1',
      name: '热门歌单',
      coverImgUrl: 'https://p1.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpg?param=130y130',
      creator: 'ruim',
    },
    {
      id: '2',
      name: '华语',
      coverImgUrl: 'https://p1.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpg?param=130y130',
      creator: 'ruim',
    },
    {
      id: '3',
      name: '流行',
      coverImgUrl: 'https://p1.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpg?param=130y130',
      creator: 'ruim',
    },
    {
      id: '4',
      name: '摇滚',
      coverImgUrl: 'https://p1.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpg?param=130y130',
      creator: 'ruim',
    },
  ]
  useEffect(() => {
    if (tabsLabel === '自建') {
      setActiveList(selfList)
    } else {
      setActiveList(collectList)
    }
  }, [tabsLabel])
  const handleAddSongSheet = () => {
    setTabsLabel('自建')
    // TODO: add song sheet
    const temp = [...activeList]
    if (temp.length >= 7) {
      Message.clear()
      Message.warning('歌单数量不能超过7个')
      return
    }
    // 从首位插入
    temp.unshift({
      id: '5',
      name: '新建歌单',
      coverImgUrl: 'https://p1.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpg?param=130y130',
      creator: 'ruom',
    })
    setActiveList(temp)
  }
  return (
    <div className={"mt-4 select-none"}>
      <div className={"flex justify-between items-center text-xs text-gray-400"}>
        <p>
          <span onClick={() => setTabsLabel('自建')} className={"hover:text-gray-600 active:text-primary-600 cursor-pointer pr-1 border-r-2 border-gray-300 mr-1"} style={{color: tabsLabel === '自建' ? '#4b5563' : ''}}>自建歌单</span>
          <span onClick={() => setTabsLabel('收藏')} className={"hover:text-gray-600 active:text-primary-600 cursor-pointer"} style={{color: tabsLabel === '收藏' ? '#4b5563' : ''}}>收藏歌单</span>
        </p>
        <IconPlus className={"hover:text-gray-600 active:text-primary-600 cursor-pointer"} onClick={() => handleAddSongSheet()}/>
      </div>
      <ul className={"mt-2"}>
        {
          activeList && activeList.map((item: any) => (
            <Dropdown
              key={item.id}
              trigger={['contextMenu']}
              position='tr'
              droplist={
                <Menu className={"w-32 bg-primary-500 text-white"}>
                  <Menu.Item key='select' onClick={() => navigate('/', {state: {id: item.id}})}>播放</Menu.Item>
                  <Menu.Item key='select' onClick={() => navigate('/', {state: {id: item.id}})}>查看歌单</Menu.Item>
                  <Menu.Item key='edit' onClick={() => navigate('/', {state: {id: item.id}})}>编辑歌单</Menu.Item>
                  <Menu.Item key='delete' onClick={() => navigate('/', {state: {id: item.id}})}>删除歌单</Menu.Item>
                </Menu>
            }>
              <li key={item.id} onClick={() => navigate('/ruom/playlist-detail', {state: {id: item.id}})} className={"flex items-center p-2 border-gray-200 hover:bg-gray-100 cursor-pointer"}>
                <img src={item.coverImgUrl} alt={item.name} className={"size-8 mr-2 rounded"} />
                <div className={"flex-1"}>
                  <p className={"text-sm text-gray-600"}>{item.name}</p>
                  <p className={"text-xs text-gray-400"}>{item.creator}</p>
                </div>
              </li>
            </Dropdown>
            ))
        }
      </ul>
    </div>

  )
}

export default memo(PlayList)
